<template>
	<el-row>
		<div class="tab-head" style="width: 100%">
			<div class="num">{{ t('common.Total') }} {{ state.pagination.total }} {{ locale == 'zh-cn' ? '条' : '' }}</div>
			<el-button icon="Download" type="primary" @click="exportExcelAll">{{ t('common.exportBtnAll') }}</el-button>
			<el-button icon="Download" type="primary" @click="exportExcel">{{ t('common.exportBtn') }}</el-button>
			<el-button icon="tools" type="primary" @click="drawer = true">{{ t('common.Morefields') }}</el-button>
		</div>
		<el-drawer :title="t('common.Morefields')" v-model="drawer">
			<el-checkbox-group v-model="checkListState.checkList" @change="setItemCheckList">
				<el-checkbox
					style="display: block"
					:label="item.label"
					:value="item.value"
					v-for="item in checkListState.checkListOptions"
					:key="item.value"
				/>
			</el-checkbox-group>
		</el-drawer>
	</el-row>
	<el-table
		:data="state.dataList"
		v-loading="state.loading"
		border
		:cell-style="tableStyle.cellStyle"
		:header-cell-style="tableStyle.headerCellStyle"
		@selection-change="selectionChangHandle"
		@sort-change="sortChangeHandle"
	>
		<el-table-column type="selection" width="40" align="center" />
		<el-table-column type="index" :label="t('list.Numbers')" :width="locale == 'zh-cn' ? 55 : 90" />
		<el-table-column prop="inventors" :label="t('list.Inventors')" show-overflow-tooltip width="120">
			<template #default="scope">
				<el-link type="primary" @click="handleGo(scope.row.id)">{{ scope.row.inventors }}</el-link>
			</template>
		</el-table-column>
		<el-table-column prop="primaryInventorCount" :label="t('list.Number_of_times_being_ﬁrst_inventor')" width="180" show-overflow-tooltip />
		<el-table-column prop="primaryInventorName" :label="t('list.First_Inventors')" show-overflow-tooltip :width="locale == 'zh-cn' ? 100 : 150"> </el-table-column>
		<el-table-column prop="inventor" :label="t('list.Co-inventors')" show-overflow-tooltip :min-width="200" />
		<el-table-column prop="agency" :label="t('list.Institution')" show-overflow-tooltip :min-width="200">
			<!-- <template #default="scope">
						<dict-tag :options="yes_no_type" :value="scope.row.allFlag"></dict-tag>
					</template> -->
		</el-table-column>
		<el-table-column prop="industryName" :width="150" :label="checkListOptionsFn('industryName')" show-overflow-tooltip v-if="checkListShow('industryName')" />
		<el-table-column prop="countryName" :width="100" :label="checkListOptionsFn('countryName')" show-overflow-tooltip v-if="checkListShow('countryName')" />
		<el-table-column prop="provinceName" :width="locale == 'zh-cn' ? 120 : 150" :label="checkListOptionsFn('provinceName')" show-overflow-tooltip v-if="checkListShow('provinceName')" />
		<el-table-column prop="cityName" :width="locale == 'zh-cn' ? 120 : 150" :label="checkListOptionsFn('cityName')" show-overflow-tooltip v-if="checkListShow('cityName')" />
		<el-table-column :width="locale == 'zh-cn' ? 100 : 200" prop="appNumber" :label="checkListOptionsFn('appNumber')" show-overflow-tooltip v-if="checkListShow('appNumber')" />
		<el-table-column :width="locale == 'zh-cn' ? 100 : 240" prop="authNumber" :label="checkListOptionsFn('authNumber')" show-overflow-tooltip v-if="checkListShow('authNumber')" />
		<el-table-column
			prop="fmzlAuthNumber"
			:width="locale == 'zh-cn' ? 150 : 200"
			:label="checkListOptionsFn('fmzlAuthNumber')"
			sortable
			show-overflow-tooltip
			v-if="checkListShow('fmzlAuthNumber')"
		/>
		<el-table-column
			prop="citedNumber"
			:width="locale == 'zh-cn' ? 130 : 200"
			:label="checkListOptionsFn('citedNumber')"
			sortable
			show-overflow-tooltip
			v-if="checkListShow('citedNumber')"
		/>
		<el-table-column
			:width="locale == 'zh-cn' ? 150 : 200"
			prop="innovateScore"
			:label="checkListOptionsFn('innovateScore')"
			sortable
			show-overflow-tooltip
			v-if="checkListShow('innovateScore')"
		/>
		<el-table-column
			:width="locale == 'zh-cn' ? 140 : 220"
			prop="vitalityCycle"
			:label="checkListOptionsFn('vitalityCycle')"
			sortable
			show-overflow-tooltip
			v-if="checkListShow('vitalityCycle')"
		/>
	</el-table>
	<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
</template>
<script setup lang="ts" name="tableMain">
import { useMessage, useMessageBox } from '/@/hooks/message';

import { BasicTableProps, useTable } from '/@/hooks/table';
import { useTabcheck } from '/@/hooks/checkList';
import { getInfoPage, exportValid } from '/@/api/cx/list';
import { useI18n } from 'vue-i18n';
const { t, locale } = useI18n();
const router = useRouter();

const props = defineProps({
    queryForm: {
        type:Object,
        default(){
            return {}
        }
    },
	paginations: {
        type:Object,
        default(){
            return {}
        }
    },
})

watch(()=>props.queryForm,(newL)=>{
    state.queryForm = newL
    getDataList()
},{
  deep: true // 使用深度监控
})

// 多选变量
const selectObjs = ref([]) as any;
const multiple = ref(true);

const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {
		// industryId: '1', //产业

		// agencyType: '', // 机构类型
		// country: '', // 国家
		// province: '', //省份
		// city: '', // 城市
		// awardFlag: '', // 奖项
		// patType: '', // 专利类型
        ...props.queryForm
	},
	pagination:{
		...props.paginations
	},
	//descs:['app_number'],
	pageList: getInfoPage,
});

//  table hook
const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } = useTable(state);

const checkListState = reactive({
	checkList: [],
	checkListOptions: [
	],
	checkListOptionsSetFn: () => {
		return [
			{
				label: t('list.Industry'),
				value: 'industryName',
				check: true,
			},
			{
				label: t('list.Country'),
				value: 'countryName',
				check: true,
			},
			{
				label: t('list.DistrictProvince'),
				value: 'provinceName',
				check: true,
			},
			{
				label: t('list.DistrictCity'),
				value: 'cityName',
			},
			{
				label: t('list.appNumber'),
				value: 'appNumber',
			},
			{
				label: t('list.authNumber'),
				value: 'authNumber',
			},
			{
				label: t('list.fmzlAuthNumber'),
				value: 'fmzlAuthNumber',
			},
			{
				label: t('list.citedNumber'),
				value: 'citedNumber',
			},
			{
				label: t('list.innovateScore'),
				value: 'innovateScore',
			},
			{
				label: t('list.vitalityCycle'),
				value: 'vitalityCycle',
			},
		];
	},
});

// checkList hook
const { checkListOptionsFn, checkListShow, setItemCheckList,init } = useTabcheck(checkListState);
// 更多字段弹窗显示
const drawer = ref(false);
watch(locale,()=>{
	init()
})
// 导出excel
const exportExcel = () => {
	if (selectObjs.value.length <= 0) {
		useMessage().error('请勾选发明人');
		return;
	}
	let param = {
		...state.queryForm,
		ids: selectObjs.value,
	};
	exportValid(param)
		.then((res) => {
			if (res.code == 0) {
				downBlobFile('/talent/info/export', Object.assign(state.queryForm, { ids: selectObjs }), '条件检索列表.xlsx').then((res) => {
					console.log(res);
				});
			} else {
				useMessage().error(res.msg);
			}
		})
		.catch((e) => {
			if (e.code == 1) {
				useMessage().error(e.msg);
			}
		});
};

// 全部导出excel
const exportExcelAll = () => {
	let param = {
		...state.queryForm
	};
	exportValid(param)
		.then((res) => {
			if (res.code == 0) {
				downBlobFile('/talent/info/export', state.queryForm, '条件检索列表.xlsx').then((res) => {
					console.log(res);
				});
			} else {
				useMessage().error(res.msg);
			}
		})
		.catch((e) => {
			if (e.code == 1) {
				useMessage().error(e.msg);
			}
		});
};

// 多选事件
const selectionChangHandle = (objs: { id: string }[]) => {
	selectObjs.value = objs.map(({ id }) => id);
	multiple.value = !objs.length;
};

// 跳转
function handleGo(talentId: any) {
	router.push({
		path: '/InnovativePlatform/home/TalentPortrait',
		query: {
			talentId: talentId,
		},
	});
}
</script>
<style lang="scss" scoped>
.tab-head {
	display: flex;
	align-items: center;
	margin-bottom: 12px;
	.num {
		margin-right: 10px;
	}
}
</style>